<template>
  <el-dialog :visible.sync="detailDialog" :close-on-click-modal="false" :before-close="detailCancel" :fullscreen="detailDialog" @close="detailCancel">
    <div class="app-container">
      <!--工具栏-->
      <div class="head-container">
        <div>
          <!-- 搜索 -->
          <el-input v-model="query.xm" clearable size="small" placeholder="姓名" style="width: 170px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <el-input v-model="query.sfz" clearable size="small" placeholder="身份证" style="width: 170px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
          <rrOperation :crud="crud" />
          <el-button
            v-if="crud.optShow.download"
            :loading="crud.downloadLoading"
            :disabled="!crud.data.length"
            class="filter-item"
            size="mini"
            type="warning"
            icon="el-icon-download"
            @click="crud.doExport"
          >导出</el-button>
        </div>
        <!--表单组件-->
        <el-dialog append-to-body="true" :close-on-click-modal="false" :before-close="crud.cancelCU" :visible.sync="crud.status.cu > 0" :title="crud.status.title" width="660px">
          <el-form ref="form" :inline="true" :model="form" :rules="rules" size="small" label-width="110px">
            <el-form-item label="姓名" prop="bisZhsqSnryXm">
              <el-input v-model="form.bisZhsqSnryXm" readonly style="width: 170px;">
                <el-button slot="append" icon="el-icon-search" title="查找患者信息" />
              </el-input>
            </el-form-item>
            <el-form-item label="身份证" prop="bisZhsqSnrySfz">
              <el-input v-model="form.bisZhsqSnrySfz" readonly style="width: 170px;" />
            </el-form-item>
            <el-form-item label="性别" prop="bisZhsqSnryXb">
              <el-input v-model="form.bisZhsqSnryXb" readonly style="width: 170px;" />
            </el-form-item>
            <el-form-item label="年龄" prop="bisZhsqNl">
              <el-input v-model="form.bisZhsqNl" readonly style="width: 170px;" />
            </el-form-item>
            <el-form-item label="医保卡号" prop="bisZhsqYbkh">
              <el-input v-model="form.bisZhsqYbkh" readonly style="width: 170px;" />
            </el-form-item>
            <el-form-item label="参保状态" prop="bisZhsqCbzt">
              <el-input v-model="form.bisZhsqCbzt" readonly style="width: 170px;" />
            </el-form-item>
            <el-form-item label="联系电话" prop="bisZhsqLxdh">
              <el-input v-model="form.bisZhsqLxdh" style="width: 170px;" />
            </el-form-item>
            <el-form-item label="地址" prop="bisZhsqHldz">
              <el-input v-model="form.bisZhsqHldz" style="width: 170px;" />
            </el-form-item>
            <el-form-item label="监护人姓名" prop="bisZhsqJhrxm">
              <el-input v-model="form.bisZhsqJhrxm" style="width: 170px;" />
            </el-form-item>
            <el-form-item label="监护人电话" prop="bisZhsqJhrdh">
              <el-input v-model="form.bisZhsqJhrdh" style="width: 170px;" />
            </el-form-item>
            <el-form-item label="关系" prop="bisZhsqGx">
              <el-select v-model="form.bisZhsqGx" filterable placeholder="请选择" style="width: 170px;">
                <el-option
                  v-for="item in dict.yjsgx"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="医保所属区县" prop="bisZhsqSnryYbssqx">
              <el-select v-model="form.bisZhsqSnryYbssqx" filterable placeholder="请选择" style="width: 170px;">
                <el-option
                  v-for="item in dict.ccstcqh"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="ADL量表评分" prop="bisZhsqAdl">
              <el-input v-model="form.bisZhsqAdl" readonly style="width: 170px;">
                <el-button slot="append" icon="el-icon-document" title="测量ADL量表" @click="openAdl" />
              </el-input>
            </el-form-item>
            <el-form-item label="申请原因">
              <el-input v-model="form.bisZhsqSqyy" :rows="3" type="textarea" style="width: 470px;" />
            </el-form-item>
            <span v-if="roleId === 295" class="demo-image__preview">
              <el-form-item label="失能老人资料(VPN)">
                <div v-for="(item, index) in tempFiles" :key="index">
                  <a :href="item.path3" target="_blank" style="color:blue;font-size: 12px;">
                    <span v-if="item.fjlb === 'BL'">病历</span>
                    <span v-else-if="item.fjlb === 'SHBZK'">社会保障卡</span>
                    <span v-else-if="item.fjlb === 'SFZ'">身份证</span>
                  </a>
                </div>
              </el-form-item>
              <el-form-item label="失能老人资料(内网)">
                <div v-for="(item, index) in tempFiles" :key="index">
                  <a :href="item.path2" target="_blank" style="color:blue;font-size: 12px;">
                    <span v-if="item.fjlb === 'BL'">病历</span>
                    <span v-else-if="item.fjlb === 'SHBZK'">社会保障卡</span>
                    <span v-else-if="item.fjlb === 'SFZ'">身份证</span>
                  </a>
                </div>
              </el-form-item>
            </span>
            <span v-if="roleId === 547" class="demo-image__preview">
              <el-image
                v-for="item in files2"
                :key="item"
                style="width: 100px; height: 100px"
                :src="item"
                :preview-src-list="files2"
              />
            </span>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button type="info" @click="zhHistoryQuery()">查看意见</el-button>
            <el-button @click="crud.cancelCU">取消</el-button>
          </div>
        </el-dialog>
        <!--表格渲染-->
        <el-table ref="table" v-loading="crud.loading" :data="crud.data" size="small" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
          <el-table-column type="selection" width="55" />
          <el-table-column align="center" prop="bisZhsqZt" label="申请状态" width="70">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.bisZhsqZt === '05'" effect="plain" type="">
                {{ dict.label.zhzt[scope.row.bisZhsqZt] }}
              </el-tag>
              <el-tag v-else-if="scope.row.bisZhsqZt === '00'" effect="plain" type="warning">
                {{ dict.label.zhzt[scope.row.bisZhsqZt] }}
              </el-tag>
              <el-tag v-else effect="plain" type="danger">
                {{ dict.label.zhzt[scope.row.bisZhsqZt] }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="lrsj" label="申请时间" width="150" />
          <el-table-column align="center" prop="bisZhsqYbkh" label="医保卡号" width="90" />
          <el-table-column align="center" prop="bisZhsqSnryXm" label="姓名" width="70" />
          <el-table-column align="center" prop="bisZhsqSnryXb" label="性别" width="50" />
          <el-table-column align="center" prop="bisZhsqSnrySfz" label="身份证" width="150" />
          <el-table-column align="center" prop="bisZhsqCblx" label="参保类型" width="90" />
          <el-table-column align="center" prop="bisZhsqNl" label="年龄" width="50" />
          <el-table-column align="center" prop="bisZhsqDykkrq" label="待遇开始日期" width="100" />
          <el-table-column align="center" prop="bisZhsqDyjsrq" label="待遇结束日期" width="100" />
          <el-table-column align="center" prop="bisZhsqSndj" label="失能等级" />
          <el-table-column align="center" prop="bisZhsqAdl" label="评分" width="50" />
          <el-table-column align="center" prop="bisZhsqSnryYbssqxName" label="统筹区" width="90" />
          <el-table-column align="center" prop="bisZhsqHljgBm" label="定点编码" width="90" />
          <el-table-column align="center" header-align="center" prop="bisHljgQymc" label="护理机构" width="250" />
          <el-table-column align="center" prop="pgry" label="评估人员" />
          <el-table-column align="center" prop="pgsj" label="评估时间" width="150" />
          <el-table-column align="center" prop="fhry" label="复核人员" />
          <el-table-column align="center" prop="fhsj" label="复核时间" width="150" />
          <el-table-column fixed="right" label="操作" width="150px" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="primary"
                @click="crud.toEdit(scope.row)"
              >查 看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <pagination />
        <!--Drawer 抽屉，隐藏ADL量表列表-->
        <el-drawer
          append-to-body="true"
          title="ADL量表"
          :visible.sync="adlDrawer"
          direction="rtl"
          size="40%"
        >
          <div v-for="(adlXmItem, adlXmIndex) in adlData" :key="adlXmIndex" style="margin-left: 20px;">
            <div v-if="roleId === 295" style="margin-bottom: 5px;">
              {{ adlXmItem.adlXmPx + "、" + adlXmItem.adlXmName }}
              <a :href="adlXmItem.inFilePath2" target="_blank" style="color:blue;font-size: 12px;">查看视频(VPN)</a>、
              <a :href="adlXmItem.inFilePath" target="_blank" style="color:blue;font-size: 12px;">查看视频(内网)</a>
            </div>
            <div v-if="roleId === 547" style="margin-bottom: 5px;">
              {{ adlXmItem.adlXmPx + "、" + adlXmItem.adlXmName }}
              <a :href="adlXmItem.inFilePath" target="_blank" style="color:blue;font-size: 12px;">查看视频</a>
            </div>
            <div>
              <el-radio-group v-model="adlXmItem.adlXmGroup">
                <div v-for="(adlXmxxItem, adlXmxxIndex) in adlXmItem.adlXmList" :key="adlXmxxIndex" style="margin-left: 10px; margin-bottom: 5px;">
                  <el-radio disabled :label="adlXmxxItem.adlXmxxId">{{ adlXmxxItem.adlXmxxName }}</el-radio>
                </div>
              </el-radio-group>
            </div>
          </div>
          <div style="margin-bottom: 20px; margin-top: 10px; margin-left: 58%;">
            <el-button @click="handleClose">关 闭</el-button>
          </div>
        </el-drawer>
        <el-dialog append-to-body="true" :visible.sync="dialogYjFormVisible" width="720px">
          <el-table ref="yjtable" v-loading="zhHistoryDataloading" :data="zhHistoryData">
            <el-table-column type="index" :index="indexMethod" label="序号" align="center" />
            <el-table-column prop="lrsj" label="操作时间" align="center" />
            <el-table-column prop="lrrxm" label="操作人" align="center" />
            <el-table-column prop="type" label="操作类型" align="center">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.type === '02'" effect="plain" type="success">
                  评估
                </el-tag>
                <el-tag v-else-if="scope.row.type === '04'" effect="plain" type="primary">
                  复核
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="result" label="操作结果" align="center" />
            <el-table-column prop="bz" label="意见" align="center" width="200px" />
          </el-table>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogYjFormVisible = false">关 闭</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import crudZhsq from '@/api/business/zhsq'
import crudFile from '@/api/tools/localStorage'
import { getAdlXmxx } from '@/api/business/adlXmxx'
import { queryPgAdlResult } from '@/api/business/AdlZhsq'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import pagination from '@crud/Pagination'
import { mapGetters } from 'vuex'

const defaultForm = { bisZhsqId: null, bisZhsqHljgId: null, bisZhsqSnryId: null, bisZhsqSnryXm: null, bisZhsqSnryXb: null, bisZhsqSnrySfz: null, bisSnryYbssqx: null, bisZhsqDykkrq: null, bisZhsqDyjsrq: null, bisZhsqXsdyq: null, bisZhsqAdl: null, bisZhsqZt: null }
export default {
  name: 'Zhsq',
  components: { pagination, rrOperation },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  dicts: ['xb', 'yjsgx', 'ccs', 'zhzt', 'ccstcqh'],
  cruds() {
    return CRUD({ title: '居家照护申请', url: 'api/sbgs/org/completedList', idField: 'bisZhsqId', sort: 'bisZhsqId,desc', crudMethod: { ...crudZhsq }})
  },
  data() {
    return {
      dialogYjFormVisible: false,
      zhHistoryDataloading: false,
      zhHistoryData: [],
      adlDrawer: false,
      snryDrawer: false,
      snryData: [],
      adlData: [],
      tempFiles: [],
      files: [],
      files2: [],
      roleId: 0,
      ddbm: '',
      detailDialog: false,
      permission: {
        add: ['admin', 'zhsq:add'],
        edit: ['admin', 'zhsq:edit'],
        del: ['admin', 'zhsq:del']
      },
      rules: {
        bisZhsqSnryXm: [
          { required: true, message: '姓名不能为空', trigger: 'blur' }
        ],
        bisZhsqSnryXb: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        bisZhsqSnrySfz: [
          { required: true, message: '身份证不能为空', trigger: 'blur' }
        ],
        bisSnryYbssqx: [
          { required: true, message: '医保所属区县不能为空', trigger: 'blur' }
        ],
        bisZhsqDykkrq: [
          { required: true, message: '待遇开始日期不能为空', trigger: 'blur' }
        ],
        bisZhsqDyjsrq: [
          { required: true, message: '待遇结束日期不能为空', trigger: 'blur' }
        ],
        bisZhsqXsdyq: [
          { required: true, message: '享受待遇期不能为空', trigger: 'blur' }
        ],
        bisZhsqAdl: [
          { required: true, message: 'ADL量表评分不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'user'
    ])
  },
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    [CRUD.HOOK.beforeRefresh]() {
      this.query.ddbm = this.ddbm
      return this.detailDialog
    },
    /**
     * 点击修改之前校验
     * @param crud
     * @param form
     * @returns {boolean}
     */
    [CRUD.HOOK.beforeToEdit](crud, form) {
      // 清空附件列表
      this.files = []
      this.files2 = []
      this.tempFiles = []
      this.getFiles()
      this.roleId = this.user.roles[0].id
      return true
    },
    detailCancel() {
      this.detailDialog = false
    },
    /**
     * 修改操作时，需要加载附件信息
     */
    getFiles: function() {
      crudFile.queryFileByFjlb2(this.form.bisZhsqId).then(res => {
        this.tempFiles = res
        for (let i = 0; i < res.length; i++) {
          this.files.push(res[i].path3)
          this.files2.push(res[i].path2)
        }
      })
    },
    /**
     * 打开ADL量表
     */
    openAdl() {
      console.log(this.user)
      this.adlDrawer = true
      this.getPgAdl()
    },
    /**
     * 打开ADL量表时，实时查询
     */
    getAdl() {
      console.log(this.form.bisZhsqAdlPc)
      getAdlXmxx({ adlPcId: this.form.bisZhsqAdlPc }).then(res => {
        console.log(res)
        this.adlData = res.adlData
        this.form.bisZhsqAdlPc = res.adlPcId
      })
    },
    /**
     * 打开ADL量表时，实时查询
     */
    getPgAdl() {
      queryPgAdlResult(this.form.bisZhsqId, this.form.bisZhsqAdlPc).then(res => {
        console.log(res)
        this.adlData = res.adlData
      })
    },
    /**
     * ADL量表关闭
     * @param done
     */
    handleClose(done) {
      this.adlDrawer = false
    },
    /**
     * 查询医保人员
     */
    zhHistoryQuery() {
      this.dialogYjFormVisible = true
      console.log(this.zhHistoryData.length === 0)
      this.zhHistoryDataloading = true
      crudZhsq.getZhHistory({ zhsqId: this.form.bisZhsqId, sort: 'lrsj,desc' }).then(res => {
        console.log(res)
        this.zhHistoryData = res.content
        this.zhHistoryDataloading = false
      }).catch(err => {
        this.zhHistoryDataloading = false
        console.log(err.data.message)
      })
    },
    /**
     * 自定义保存
     * @param zt
     */
    doSave(zt) {
      this.form.bisZhsqZt = zt
      const titleMsg = zt === 'zhzt03' ? '复核通过' : '复核不通过'
      if (this.crud.status.add === 1 && this.crud.status.edit === 0) { // 点击新增按钮，提交的时候只是新增
        this.crud.status.add = CRUD.STATUS.PROCESSING
        crudZhsq.add(this.form)
          .then(res => {
            this.crud.status.add = CRUD.STATUS.NORMAL
            this.$notify({
              title: titleMsg,
              type: 'success',
              duration: 2500
            })
            this.crud.toQuery()
          })
          .catch(err => {
            this.crud.status.add = CRUD.STATUS.PREPARED
            console.log(err)
          })
      } else if (this.crud.status.add === 0 && this.crud.status.edit === 1) { // 点击修改按钮，提交的时候只是修改
        this.crud.status.edit = CRUD.STATUS.PROCESSING
        crudZhsq.edit(this.form)
          .then(res => {
            this.crud.status.edit = CRUD.STATUS.NORMAL
            this.$notify({
              title: titleMsg,
              type: 'success',
              duration: 2500
            })
            this.crud.toQuery()
          })
          .catch(err => {
            this.crud.status.edit = CRUD.STATUS.PREPARED
            console.log(err)
          })
      }
    }
  }
}
</script>

<style scoped>

</style>
